<template>
  <div class="plot-symbol">
    <el-tabs v-model="activeName" style="color:#fff;padding:2px 4px" @tab-click="handleClick">
      <el-tab-pane
        v-for="(task,index) in featureServices"
        :key="index"
        :label="task.name"
        :name="task.name"
      />
    </el-tabs>
    <el-row v-for="row in rows" :key="row.id">
      <el-col v-for="s in row.data" :span="6" :key="s.id">
        <div class="card" @click="onSymbolSelected(s)">
          <PlotSymbol
            :flag="s.flag"
            :line-width="s.lineWidth"
            :stroke-style="s.strokeStyle"
            :fill-style="s.fillStyle"
            :scale="s.scale"
            :active="isSelected === s._id"
            :name="s.name"
          />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import PlotSymbol from '@/components/PlotSymbol'

export default {
  name: 'Index',
  components: { PlotSymbol },
  data() {
    return {
      isSelected: undefined,
      activeName: '尾矿采集',
      ins: -1
    }
  },
  methods: {
    onSymbolSelected(s) {
      this.isSelected = s._id // 处理点击事件
      // 设置标绘模式
      this.mapServiceLeft.setSelectSymbol(s)
      this.mapServiceRight.setSelectSymbol(s)
      switch (s.type) {
        case 0:
          this.mapServiceLeft.setChangeMode('draw_point', s._id)
          this.mapServiceRight.setChangeMode('draw_point', s._id)
          break
        case 1:
          this.mapServiceLeft.setChangeMode('draw_line_string', s._id)
          this.mapServiceRight.setChangeMode('draw_line_string', s._id)
          break
        case 2:
          this.mapServiceLeft.setChangeMode('draw_polygon', s._id)
          this.mapServiceRight.setChangeMode('draw_polygon', s._id)
          break
      }
    },
    handleClick($event) {
      this.ins = $event.index
      const task = this.featureServices[this.ins]
      this.$store.dispatch('xcgl/RequestFeatureFromTask', task)
    }
  },
  computed: {
    ...mapState({
      symbols(state) {
        return state.xcgl.selectTask ? state.xcgl.selectTask.symbol : []
      },
      mapServiceRight(state) {
        return state.xcgl.mapServiceRight
      },
      mapServiceLeft(state) {
        return state.xcgl.mapServiceLeft
      },
      featureServices(state) {
        return state.xcgl.featureService
      }
    }),
    rows() {
      const row = Math.ceil(this.symbols.length / 4)
      const rows = []
      for (var i = 0; i < row; i++) {
        const start = i * 4
        const end = (i + 1) * 4
        rows.push({
          id: i,
          data: this.symbols.slice(
            start,
            end > this.symbols.length ? this.symbols.length : end
          )
        })
      }
      return rows
    }
  },
  mounted(){

  }

}
</script>
<style>
.plot-symbol {
  height: auto;
  width: 100%;
}



.plot-symbol .el-tabs__item {
  color: #fff;
}

.card {
  text-align: center;
  padding: 5px;
}

.card:hover {
  cursor: pointer;
}

.card div {
  font-size: 1px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.plot-symbol .box img {
  margin-bottom: 3px;
  display: block;
}

s-name {
  font-size: 5px;
}
</style>

